<template>
    <!-- 添加或修改镀锌单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body :close-on-click-modal="false"
        v-dialogDrag>
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-tabs v-model="activeName" class="detail-tab" type="card">
                <el-tab-pane label="基本信息" name="first">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="发货日期" prop="ddDate">

                                <el-date-picker clearable v-model="form.ddDate" type="datetime"
                                    value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择发货日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="需求日期" prop="subDate">
                                <el-date-picker clearable v-model="form.subDate" type="datetime"
                                    value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择需求日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="镀锌厂名称" prop="supplierName">
                                <el-input v-model="form.supplierName" placeholder="请输入镀锌厂名称" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="总毛重" prop="dunwei">
                                <el-input v-model="form.dunwei" placeholder="请输入总毛重" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="总皮重" prop="pizhong">
                                <el-input v-model="form.pizhong" placeholder="请输入总皮重" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="总净重" prop="jingzhong">
                                <el-input v-model="form.jingzhong" placeholder="请输入总净重" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="总数量" prop="counts">
                                <el-input v-model="form.counts" placeholder="请输入总数量" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="备注" prop="remark">
                                <el-input v-model="form.remark" placeholder="请输入备注" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
        </el-form>
        <el-table border v-loading="loading" :data="dataList" ref="table" :max-height="tableMaxHeight">
            <!--序号 默认是index 可以修改-->
            <el-table-column prop="sort" label="序号" width="150">
                <template slot-scope="scope">
                    <el-input-number size="mini" v-model="scope.row.sort"></el-input-number>
                </template>
            </el-table-column>

            <el-table-column prop="goodsBrand" label="物料选择" width="380">
                <template slot-scope="scope">
                    <el-autocomplete style="width: 350px;" v-model="scope.row.goodsBrand"
                        :fetch-suggestions="querySearch" placeholder="请输入内容">
                        <template #default="{ item, index }">
                            <div @click="handleClick(item, scope.$index)">
                                {{ item.value }}
                            </div>
                        </template>
                    </el-autocomplete>
                </template>
            </el-table-column>
            <el-table-column prop="code" label="存货编码" />
            <el-table-column prop="name" label="物料名称" />
            <el-table-column prop="model" label="物料型号" />
            <!-- <el-table-column prop="unit" label="单位" /> -->
            <el-table-column prop="hcCount" label="回厂/总数量" width="150" v-if="queryParams.parentId">
                <template slot-scope="scope">
                    <el-input-number size="mini" v-model="scope.row.hcCount"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column prop="hcDunwei" label="回厂/总毛重" width="150" v-if="queryParams.parentId">
                <template slot-scope="scope">
                    <el-input-number size="mini" v-model="scope.row.hcDunwei"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column prop="hcPizhong" label="回厂/总皮重" width="150" v-if="queryParams.parentId">
                <template slot-scope="scope">
                    <el-input-number size="mini" v-model="scope.row.hcPizhong"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column prop="hcJingzhong" label="回厂/总净重" width="150" v-if="queryParams.parentId">
                <template slot-scope="scope">
                    <el-input-number size="mini" v-model="scope.row.hcJingzhong"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column prop="counts" label="出厂/总数量" width="150">
                <template slot-scope="scope">
                    <el-input-number size="mini" v-model="scope.row.counts"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column prop="dunwei" label="出厂/总毛重" width="150">
                <template slot-scope="scope">
                    <el-input-number size="mini" v-model="scope.row.dunwei"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column prop="pizhong" label="出厂/总皮重" width="150">
                <template slot-scope="scope">
                    <el-input-number size="mini" v-model="scope.row.pizhong"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column prop="jingzhong" label="出厂/总净重" width="150">
                <template slot-scope="scope">
                    <el-input-number size="mini" v-model="scope.row.jingzhong"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" width="150">
                <template slot-scope="scope">
                    <el-input size="mini" v-model="scope.row.remark"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="220">
                <template slot-scope="scope">
                    <el-popconfirm :title="`确认删除当前数据项？`" @confirm="handleDelete(scope.row, scope.$index)"
                        style="margin-left: 10px;">
                        <el-button slot="reference" size="mini" type="text" icon="el-icon-delete"
                            v-hasPermi="['develop:GoodsSaleMaterial:remove']">删除
                        </el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-row>
            <el-col :span="24" style="text-align: center;padding-top: 20px;">
                <el-button style="width: 100%;" icon="el-icon-plus" plain type="primary" @click="addRow">添加行</el-button>
            </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定 镀锌入/出 库</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { addAction, getById, updateAction, getAction ,deleteAction} from '@/api/manage';
import moment from 'moment';

export default {
    name: "LvDuxinForm",
    data() {
        return {
            // 遮罩层
            loading: true,
            activeName: "first",
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 表单参数
            form: {},
            type: null,
            loadingSupplier: false,
            optionsSupplier: [],
            dataList: [],
            orderList: [],
            projectNos: [],
            loading3: false,
            goodsList: [],
            queryParams: {
                parentId: null,
            },
            goodsQueryParams: {
                name: null,
                pageNum: 1,
                pageSize: 20,
            },
            // 表单校验
            rules: {
                type: [{ required: true, message: "请选择出入库类别", trigger: "change" }],
                rukupeople: [{ required: true, message: "入库人不能为空", trigger: "change" }],
                rukuDate: [{ required: true, message: "请选择出入库日期", trigger: "change" }],
            },
            tableMaxHeight: window.innerHeight - 320,
            url: {
                getById: '/lvDuxin/lvDuxin/',
                add: '/lvDuxin/lvDuxin/addDetail',
                edit: '/lvDuxin/lvDuxin/uodateDetail',
                detailList: "/lvDuxindetail/lvDuxindetail/list"

            },
        };
    },
    created() {

    },
    methods: {
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        querySearch(queryLabel, cb) {
            let that = this;
            that.goodsQueryParams.queryLabel = queryLabel;

            getAction('/goodsOrderIn/goodsOrderIn/list', that.goodsQueryParams).then(response => {
                that.goodsList = response.rows;
                for (let i = 0; i < this.goodsList.length; i++) {
                    that.goodsList[i].value = that.goodsList[i].name + '-' + that.goodsList[i].model + '-' + that.goodsList[i].code;
                }
                const goodsList = that.goodsList;
                const results = queryLabel
                    ? goodsList.filter(that.createFilter(queryLabel))
                    : goodsList;
                // 调用 callback 返回建议列表的数据
                cb(results);
            })
        },
        handleClick(item, index) {
            this.$nextTick(() => {
                let newItem = {
                    sort: index + 1,
                    goodsId: item.id,
                    code: item.code, //产品编号
                    name: item.name, //名称
                    model: item.model,//型号
                    unit: item.unit,
                    brand: item.brand,
                    count: item.count, // 单位
                    unit: item.unit, //产品单位
                    remark: '',//备注
                }
                this.$set(this.dataList, index, newItem)
            })
        },
        createFilter(queryLabel) {
            return (restaurant) => {
                return (
                    restaurant.value.toLowerCase().includes(queryLabel.toLowerCase())
                );
            };
        },
        async search(queryString) {
            this.loading3 = true;
            if (queryString) {
                try {
                    let params = {
                        // "pageSizeZero": true,
                        "pageNum": 1,
                        "pageSize": 20,
                        "code": queryString

                    };
                    getAction("/projectBaseInfo/projectBaseInfo/list", params).then(response => {
                        this.orderList = response.rows;
                        this.loading3 = false;
                    });

                } catch (error) {
                    console.error('Error fetching data:', error);
                    this.loading3 = false;
                }
            } else {
                this.orderList = [];
                this.loading3 = false;
            }
        },
        //点击按钮添加空行
        addRow() {
            this.$nextTick(() => {
                this.dataList.push({
                    sort: this.dataList.length + 1,
                    code: '',//产品编号
                    goodsName: '',//名称
                    goodModel: '',
                    daohuoCount: 0,
                    dun: 0,
                })
            })
        },
        handleDelete(row, index) {
            const ids = row.id || this.ids;
            if (!ids) {
                this.$nextTick(() => {
                    this.dataList.splice(index, 1)
                })
            } else {
                 this.$nextTick(() => {
                    this.dataList.splice(index, 1)
                })
                // deleteAction(this.url.remove, ids).then(response => {
                //     this.getList();
                //     this.$modal.msgSuccess("删除成功");
                // }).catch(() => {
                // });
            }
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                delFlag: null,
                createBy: null,
                createTime: null,
                updateBy: null,
                updateTime: null,
                remark: null,
                ddDate: null,
                subDate: null,
                money: null,
                counts: null,
                dunwei: null,
                pizhong: null,
                jingzhong: null,
                supplierName: null,
                bangdan: null,
                bangdanhui: null,
                hcDate: null,
                hcCount: null,
                hcDunwei: null,
                hcPizhong: null,
                hcJingzhong: null,
                parentId: null,
            };
            this.resetForm("form");
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.queryParams.parentId = '';
            this.open = true;
            this.title = "添加11镀锌单";
            this.dataList = [];
            for (let i = 0; i < 1; i++) {
                this.dataList.push({
                    code: "",
                    name: "",
                    model: "",
                    unit: "",
                    hcCount: "",
                    hcDunwei: "",
                    hcPizhong: "",
                    hcJingzhong: "",
                    counts: "",
                    dunwei: "",
                    pizhong: "",
                    jingzhong: "",
                    remark: "",
                })
            }
            this.loading = false;
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const id = row.id || this.ids;
            this.queryParams.parentId = row.id;
            this.getList();
            getById(this.url.getById, id).then(response => {
                this.form = response.data;
                this.open = true;
                this.title = "修改镀锌单";
            });
        },
        getList() {
            this.loading = true;
            getAction(this.url.detailList, this.queryParams).then(response => {
                this.dataList = response.rows;
                this.loading = false;
                if (this.dataList.length === 0) {
                    for (let i = 0; i < 1; i++) {
                        this.dataList.push({
                            code: "",
                            name: "",
                            model: "",
                            unit: "",
                            hcCount: "",
                            hcDunwei: "",
                            hcPizhong: "",
                            hcJingzhong: "",
                            counts: "",
                            dunwei: "",
                            pizhong: "",
                            jingzhong: "",
                            remark: "",
                        })
                    }
                } else {
                    for (let i = 0; i < this.dataList.length; i++) {
                        this.dataList[i].goodsBrand = this.dataList[i].name + '-' + this.dataList[i].model
                    }
                }

            });
        },
        /** 提交按钮 */
        submitForm() {
            this.form.detailList = this.dataList;
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {
                        addAction(this.url.edit, this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.$emit('ok');
                        });
                    } else {
                        addAction(this.url.add, this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.$emit('ok');
                        });
                    }
                }
            });
        },
    }
};
</script>
